<template>
    <div
      class="page"
      :style="{
		'--topBarHeight':topBarHeight +'px',
	  }">
        <topBar @zoomTopBar="layoutReset" class="topBar"/>
		<slot></slot>
		<BottomContact/>
        <BottomLine/>
    </div>
</template>

<script lang="ts" setup>
import topBar from './pc/TopBar/index.vue'
import BottomContact from './pc/BottomContact/index.vue'
import BottomLine from './pc/BottomLine/index.vue'
const topBarHeight:Ref<number> = ref(90)
const layoutReset = ()=>{
	// topBarHeight.value = topBarHeight.value === 220 ? 100 : 220
}

</script>

<style lang="scss" scoped>
.page{
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	.topBar{
		height: var(--topBarHeight);
		transition: all .3s;
		z-index: 100;
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		min-width: 1358px;
	}
}
</style>
